<template>
  <nav
    class="text-center text-3xl sm:text-7xl mb-3 dark:bg-black dark:text-white"
  >
    <span class="italic mr-4 text-green-500"> Tailwind CSS With Vue </span>
    <a href="#" class="underline hidden sm:inline-block">home</a>
    <a href="#" class="underline ml-4 hidden sm:inline-block">about</a>
    <button class="sm:hidden" @click="showMenu = true">+</button>

    <button @click="toggleTheme">{{ currentIcon }}</button>
  </nav>
  <main
    class="grid grid-cols-1 text-center sm:grid-cols-4 gap-2 h-screen dark:bg-slate-700"
  >
    <aside class="bg-blue-300 col-span-1 dark:bg-black">one</aside>
    <section class="col-span-1 sm:col-span-2 bg-blue-300 dark:bg-black">
      two
    </section>
    <aside class="bg-blue-300 col-span-1 dark:bg-black">three</aside>
  </main>

  <!-- 折叠菜单弹窗 -->
  <div
    v-if="showMenu"
    class="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end"
  >
    <div class="bg-gray bg-white pl-4 pt-4 rounded-l-lg shadow-lg w-48">
      <div class="flex justify-between items-center mb-4">
        <span class="font-bold">菜单</span>
        <button @click="showMenu = false" class="mr-4">x</button>
      </div>
      <div class="flex flex-col space-y-2">
        <a href="#" class="underline">home</a>
        <a href="#" class="underline">about</a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { computed } from "vue";
const showMenu = ref(false);

const sun_icon = "☀️";
const moon_icon = "🌙";
// 添加图标切换状态变量
const isDark = ref(false);
const currentIcon = computed(() => (isDark.value ? moon_icon : sun_icon));

//在html标签中添加dark属性
function toggleTheme() {
  isDark.value = !isDark.value;
  console.log(isDark.value);
  if (isDark.value) {
    document.documentElement.classList.toggle("dark");
  } else {
    document.documentElement.classList.toggle("dark");
  }
}
</script>

<style scoped></style>
